import 'package:card_swiper/card_swiper.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:largefriends/service/manager/lf_payment_helper.dart';
import 'package:largefriends/res.dart';
import 'package:largefriends/res/lf_double_ext.dart';
import 'package:largefriends/res/strings/lf_strings.dart';
import 'package:largefriends/widgets/lf_app_bar.dart';
import 'package:largefriends/widgets/lf_button.dart';

import '../../config/lf_config.dart';
import '../../res/lf_color.dart';
import '../../res/lf_fonts.dart';
import '../../res/lf_text_style.dart';
import '../lf_browser/lf_browser_logic.dart';
import 'lf_payment_logic.dart';

class LfPaymentPage extends StatefulWidget {
  const LfPaymentPage({super.key});

  @override
  State<LfPaymentPage> createState() => _LfPaymentPageState();
}

class _LfPaymentPageState extends State<LfPaymentPage> {
  final logic = Get.put(LfPaymentLogic());

  @override
  Widget build(BuildContext context) {
    return WillPopScope(
        child: Scaffold(
          appBar: lfAppBar(leadingCallback: () {
            Get.back();
          }),
          body: Stack(
            children: [
              Positioned.fill(
                  child: CustomScrollView(
                slivers: [
                  _goldBanner().sliverBox,
                  20.h.sliverBox,
                  _items().sliverBox,
                  20.h.sliverBox,
                  _btn().sliverBox,
                  30.h.sliverBox,
                  _tips().sliverBox,
                  30.h.sliverBox,
                ],
              )),
            ],
          ),
        ),
        onWillPop: () async {
          Get.back();
          return false;
        });
  }

  Widget _goldBanner() {
    List<String> title = [
      strUnlimitedMessages.tr,
      strSeeWhoLikedYou.tr,
      strStatusSymbol.tr,
      strSeeWhoViewedYou.tr,
      strVoiceMessage.tr,
      strBrowseProfiles.tr
    ];
    List<String> content = [
      strGoldContent1.tr,
      strGoldContent2.tr,
      strGoldContent3.tr,
      strGoldContent4.tr,
      strGoldContent6.tr,
      strGoldContent7.tr,
    ];

    List<String> icons = [
      Res.banner_message,
      Res.banner_liked,
      Res.icon_premium,
      Res.banner_see,
      Res.banner_voice,
      Res.banner_anonymous,
    ];

    return SizedBox(
      height: 140.h,
      child: Swiper(
        itemBuilder: (BuildContext context, int index) {
          return Container(
            padding: EdgeInsets.symmetric(horizontal: 20.w),
            alignment: Alignment.center,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisAlignment: MainAxisAlignment.start,
              children: [
                Image.asset(
                  icons[index],
                  height: 40.h,
                  color: colorFEFEFE,
                ),
                10.h.sbh,
                Text(
                  title[index],
                  style: lfTextStyle(sp: 17.sp, fontFamily: fontBold),
                  textAlign: TextAlign.center,
                ),
                5.h.sbh,
                Text(
                  content[index],
                  style: lfTextStyle(
                    sp: 14.sp,
                    fontFamily: fontRegular,
                  ),
                  textAlign: TextAlign.center,
                ),
              ],
            ),
          );
        },
        pagination: SwiperPagination(
            margin: const EdgeInsets.all(5.0),
            builder: DotSwiperPaginationBuilder(
                color: Colors.grey,
                size: 8.r,
                activeColor: colorFEFEFE,
                activeSize: 8.r)),
        itemCount: title.length,
        duration: 1000,
        autoplayDelay: 3000,
        autoplay: true,
        control: null,
      ),
    );
  }

  Widget _items() {
    return Row(
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        16.w.sbw,
        Expanded(
          flex: 5,
          child: InkWell(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Container(
                  decoration: BoxDecoration(
                    color: Colors.transparent,
                    borderRadius: 20.r.radius,
                  ),
                  padding: EdgeInsets.symmetric(horizontal: 4.w, vertical: 1.h),
                  child: Text(
                    'Save 33%',
                    style: lfTextStyle(
                        sp: 12.sp, fontFamily: fontRegular, color: Colors.transparent),
                  ),
                ),
                10.h.sbh,
                Obx(() {
                  bool isSelected =
                      logic.selectedSku.value == LfPaymentHelper().sku[0];
                  return Container(
                    decoration: BoxDecoration(
                        color: isSelected?colorFF007F:color8F8F8F,
                        borderRadius: 10.r.radius,
                        border: Border.all(
                            color:
                                isSelected ? colorFF007F : Colors.transparent,
                            width: 4.r)),
                    child: Column(
                      mainAxisSize: MainAxisSize.min,
                      children: [
                        30.h.sbh,
                        LayoutBuilder(builder: (context, constant) {
                          return constant.maxWidth.sbw;
                        }),
                        Text(
                          '1',
                          style: lfTextStyle(sp: 36.sp, fontFamily: fontBold),
                        ),
                        Text(
                          'month',
                          style:
                              lfTextStyle(sp: 14.sp, fontFamily: fontRegular),
                        ),
                        6.h.sbh,
                        Text(
                          '\$19.99',
                          style: lfTextStyle(sp: 14.sp, fontFamily: fontBold),
                        ),
                        3.h.sbh,
                        Text(
                          '\$19.99/mo',
                          style: lfTextStyle(
                              sp: 13.sp,
                              fontFamily: fontBold,
                              color: Colors.transparent),
                        ),
                        30.h.sbh,
                      ],
                    ),
                  );
                })
              ],
            ),
            onTap: () {
              logic.selectedSku.value = LfPaymentHelper().sku[0];
            },
          ),
        ),
        10.w.sbw,
        Expanded(
          flex: 6,
          child: InkWell(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Container(
                  decoration: BoxDecoration(
                    color: colorBF00FF,
                    borderRadius: 20.r.radius,
                  ),
                  padding: EdgeInsets.symmetric(horizontal: 4.w, vertical: 1.h),
                  child: Text(
                    'Save 33%',
                    style: lfTextStyle(
                        sp: 12.sp, fontFamily: fontRegular, color: colorFEFEFE),
                  ),
                ),
                10.h.sbh,
                LayoutBuilder(builder: (context, constant) {

                  return Obx((){
                    bool isSelected =
                        logic.selectedSku.value == LfPaymentHelper().sku[1];
                    return Container(
                      width: constant.maxWidth,
                      alignment: Alignment.center,
                      padding: EdgeInsets.symmetric(vertical: 5.h),
                      decoration: BoxDecoration(
                          color: isSelected?colorFF007F:colorFEFEFE,
                          borderRadius: BorderRadius.only(
                              topLeft: Radius.circular(10.r),
                              topRight: Radius.circular(10.r))),
                      child: Text(
                        'POPULAR',
                        style: lfTextStyle(
                            sp: 14.sp, fontFamily: fontBold, color: isSelected?colorFEFEFE:color000000),
                      ),
                    );
                  });
                }),
                Obx(() {
                  bool isSelected =
                      logic.selectedSku.value == LfPaymentHelper().sku[1];
                  return Container(
                    decoration: BoxDecoration(
                        color: isSelected
                            ? colorFF007F
                            : color8F8F8F,
                        borderRadius: BorderRadius.only(
                            bottomRight: Radius.circular(10.r),
                            bottomLeft: Radius.circular(10.r)),
                        border: Border(
                            left: BorderSide(
                                color: isSelected
                                    ? colorFF007F
                                    : Colors.transparent,
                                width: 4.r),
                            right: BorderSide(
                                color: isSelected
                                    ? colorFF007F
                                    : Colors.transparent,
                                width: 4.r),
                            bottom: BorderSide(
                                color: isSelected
                                    ? colorFF007F
                                    : Colors.transparent,
                                width: 4.r))),
                    child: Column(
                      mainAxisSize: MainAxisSize.min,
                      children: [
                        30.h.sbh,
                        LayoutBuilder(builder: (context, constant) {
                          return constant.maxWidth.sbw;
                        }),
                        Text(
                          '3',
                          style: lfTextStyle(sp: 36.sp, fontFamily: fontBold),
                        ),
                        Text(
                          'months',
                          style:
                              lfTextStyle(sp: 14.sp, fontFamily: fontRegular),
                        ),
                        6.h.sbh,
                        Text(
                          '\$19.99',
                          style: lfTextStyle(sp: 14.sp, fontFamily: fontBold),
                        ),
                        3.h.sbh,
                        Text(
                          '\$19.99/mo',
                          style: lfTextStyle(
                              sp: 13.sp,
                              fontFamily: fontRegular,
                              color: colorFEFEFE.withAlpha(200)),
                        ),
                        30.h.sbh,
                      ],
                    ),
                  );
                })
              ],
            ),
            onTap: () {
              logic.selectedSku.value = LfPaymentHelper().sku[1];
            },
          ),
        ),
        10.w.sbw,
        Expanded(
          flex: 5,
          child: InkWell(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Container(
                  decoration: BoxDecoration(
                    color: colorBF00FF,
                    borderRadius: 20.r.radius,
                  ),
                  padding: EdgeInsets.symmetric(horizontal: 4.w, vertical: 1.h),
                  child: Text(
                    'Save 50%',
                    style: lfTextStyle(
                        sp: 12.sp, fontFamily: fontRegular, color: colorFEFEFE),
                  ),
                ),
                10.h.sbh,
                Obx(() {
                  bool isSelected =
                      logic.selectedSku.value == LfPaymentHelper().sku[2];
                  return Container(
                    decoration: BoxDecoration(
                        color: isSelected
                            ? colorFF007F
                            : color8F8F8F,
                        borderRadius: 10.r.radius,
                        border: Border.all(
                            color:
                                isSelected ? colorFF007F : Colors.transparent,
                            width: 4.r)),
                    child: Column(
                      mainAxisSize: MainAxisSize.min,
                      children: [
                        30.h.sbh,
                        LayoutBuilder(builder: (context, constant) {
                          return constant.maxWidth.sbw;
                        }),
                        Text(
                          '6',
                          style: lfTextStyle(sp: 36.sp, fontFamily: fontBold),
                        ),
                        Text(
                          'months',
                          style:
                              lfTextStyle(sp: 14.sp, fontFamily: fontRegular),
                        ),
                        6.h.sbh,
                        Text(
                          '\$19.99',
                          style: lfTextStyle(sp: 14.sp, fontFamily: fontBold),
                        ),
                        3.h.sbh,
                        Text(
                          '\$19.99/mo',
                          style: lfTextStyle(
                              sp: 13.sp,
                              fontFamily: fontBold,
                              color: colorFEFEFE.withAlpha(200)),
                        ),
                        30.h.sbh,
                      ],
                    ),
                  );
                })
              ],
            ),
            onTap: () {
              logic.selectedSku.value = LfPaymentHelper().sku[2];
            },
          ),
        ),
        16.w.sbw,
      ],
    );
  }

  Widget _btn() {
    return Padding(
      padding: EdgeInsets.symmetric(horizontal: 16.w),
      child: LfButton(enabled: true, text: 'Get Premium', onPress: () {}),
    );
  }

  Widget _tips() {
    return Padding(
      padding: EdgeInsets.symmetric(horizontal: 16.w),
      child: Obx(() {
        var month = "3 months";

        if (logic.selectedSku.value == LfPaymentHelper().sku[0]) {
          month = "1 month";
        } else if (logic.selectedSku.value == LfPaymentHelper().sku[2]) {
          month = "6 months";
        }
        return Text.rich(
          TextSpan(
              text:
                  'Your subscription will automatically renew every $month for %19.99 unless you cancel it in your account on Google Play. For more information, visit our ',
              style: lfTextStyle(
                sp: 13.sp,
                fontFamily: fontRegular,
              ),
              children: [
                TextSpan(
                    text: strServiceAgreement.tr,
                    style: lfTextStyle(
                        sp: 13.sp,
                        fontFamily: fontRegular,
                        decoration: TextDecoration.underline),
                    recognizer: TapGestureRecognizer()
                      ..onTap = () {
                        toBrowserPage(
                            title: strServiceAgreement.tr.toUpperCase(),
                            url: '$webUrl$serviceAgreementUrl');
                      }),
                const TextSpan(text: ' and '),
                TextSpan(
                    text: strPrivacyPolicy.tr,
                    style: lfTextStyle(
                        sp: 13.sp,
                        fontFamily: fontRegular,
                        decoration: TextDecoration.underline),
                    recognizer: TapGestureRecognizer()
                      ..onTap = () {
                        toBrowserPage(
                            title: strPrivacyPolicy.tr.toUpperCase(),
                            url: '$webUrl$privacyPolicyUrl');
                      }),
              ]),
          textAlign: TextAlign.center,
        );
      }),
    );
  }
}
